<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>草榴社區</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <style>
        * {
            outline: 0;
        }
        /*header*/
        header {
            background-color: #40aa53;
        }

        .header {
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;            
        }
        .header a{
            display: block;
            background-size: 30px;
            background-repeat: no-repeat;
            background-position: center;
            padding: 20px;
        }
        .title {
        	font-size: 20px; height: 40px; margin: 0em; color: #fff;
            line-height:40px;
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            flex: 1;
            text-align: center;
        }
        .header .menu {
            background-image: url("../image/drawer.png");
        }
        /*header*/
    </style>
</head>
<body>
<header>
    <div class="index header ">
        <a class="menu" tapmode="" onclick="sliding()"></a>
        <div class="title" >
            	草榴社區
        </div>
        <a></a>
    </div>
</header>
<script type="text/javascript" src="../script/zepto.min.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script>
function sliding() {
    api.openSlidPane({type: 'left'});
}
apiready = function () {
    $api.fixIos7Bar($api.dom('header'));
    api.addEventListener({
        name: 'keyback'
    }, function(ret, err){
        api.closeWidget();
    });
    
   var y = $("header").height();
	api.openFrameGroup ({
	    name: 'main_group',
	    scrollEnabled:false,
	    rect:{x: 0, y: y, w: 'auto', h: 'auto'},
	    index:0,
	    frames: [
	        {
	            name: 'frm_forum',
	            url: 'frm_forum.html',
	            pageParam:{main_group_height:y},
	            bounces:true,
	        },
	        {
	            name: 'frm_setting',
	            url: 'frm_setting.html',
	            pageParam:{main_group_height:y},
	        }
	    ]
	}, function(ret, err){
	    var name = ret.name;
	    var index = ret.index;
	});
    
};
	
function setFrameGroupIndex(index, title) {
	if (title) {
		$(".title").html(title);
	}
    api.setFrameGroupIndex({
        name: 'main_group',
        index: index
    });

}
</script>
</body>
</html>